<template>
  <el-drawer title="选择用户" v-model="visible" direction="rtl" size="50%"
             :wrapper-closable="false" :with-header="false"
             @close="()=>$emit('update:show',false)">
    <div class="custom" v-if="visible">
      <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload" :height-offset="-110"/>
    </div>
  </el-drawer>
</template>
<script>
import TablePage from "@/components/TablePage";

export default {
  name: 'UserSelect',
  components: {TablePage},
  props: {
    show: Boolean,
    result: Function
  },
  data() {
    return {
      query: [
        {
          type: 'text',
          label: '手机号',
          placeholder: '请输入会员手机号查询',
          key: 'mobile'
        },
        {
          type: 'text',
          label: '会员昵称',
          placeholder: '请输入会员昵称查询',
          key: 'nickname'
        },
        {
          type: 'select',
          label: '状态',
          placeholder: '请选择状态查询',
          key: 'status',
          styles: {width: '150px'},
          options: [
            {label: '全部', value: ''},
            {label: '正常', value: '0'},
            {label: '冻结', value: '-1'},
          ]
        }, {
          type: 'date-picker',
          label: '选择时间',
          placeholder: '请选择时间',
          key: 'time'
        }
      ],
      columns: [
        {
          label: '#',
          type: 'index',
          width: '80px'
        },
        {
          label: '会员头像',
          type: 'render',
          width: '180px',
          render: (data) => {
            if (!data.avatar) return ''
            return `<img src="${data.avatar}" style="width: 48px;height: 48px"/>`;
          },
        }, {
          label: '会员昵称',
          prop: 'nickname',
          width: '180px'
        }, {
          label: '手机号',
          prop: 'mobile',
          width: '180px'
        }, {
          label: '状态',
          type: 'render',
          width: '100px',
          render: (data) => {
            if (data.status == 0)
              return `<span class="el-tag el-tag--dark mx-1 is-round"><span class="el-tag__content">正常</span></span>`
            else return `<span class="el-tag el-tag--danger el-tag--dark mx-1 is-round"><span class="el-tag__content">冻结</span> </span>`
          },
        }, {
          label: '注册时间',
          type: 'date',
          width: '180px',
          prop: 'created',
        }, {
          label: '账户余额',
          type: 'render',
          width: '180px',
          render: (data) => {
            if (!data.amounts) return ''
            let arr = []
            data.amounts.forEach(e => {
              arr.push(`<div style="text-align: left" ><span>${e.name}:</span><span>${e.amount}</span></div>`)
            })

            return arr.join('')
          },
        }, {
          label: '推荐人',
          type: 'render',
          width: '180px',
          render: (data) => {
            if (!data.inviteUser) return ''
            let arr = []

            arr.push(`<p>${data.inviteUser.mobile}</p>`)

            return arr.join('')
          },
        }, {
          label: '操作',
          type: 'buttons',
          width: '100px',
          buttons: [
            {
              label: '选择',
              type: 'primary',
              styles: {},
              icon: 'Check',
              callback: (data) => {
                if (this.result) this.result([data])
                this.visible = false;
              }
            }
          ]
        }
      ],
      data: {
        total: 1000,
        list: [],
        page: 1,
        size: 40
      },
      visible: false
    }
  },
  watch: {
    show() {
      this.visible = this.show
    }
  },
  methods: {
    onload(data) {
      if (data && data.page)
        this.data.page = data.page;
      if (data && data.size)
        this.data.size = data.size;

      Object.assign(data, {
        direction: 'DESC',
        properties: ['id']
      })
      this.$api.apiQuery('/api/manager/user/', data).then(res => {
        this.data.total = res.total
        this.data.list = res.data;
      })
    },
  }
}
</script>